<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        html body .wrapper{
            width: 100%;
            height: 100%;
        }
        .wrapper{
            /*width: 100%;*/
            /*height: 100%;*/
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .wrapper header{
            width: 100%;
            flex: 0 0 10%;
            display: flex;
            flex-direction: column;
        }
        .wrapper header h4{
            font-size: 20px;
            font-weight: 500;
            flex: 0 0 65px;
            margin: 15px 50px;
        }
        .wrapper .form_body{
            flex: 0 0 80%;
            display: flex;
            flex-direction: column;
            /*align-items: center;*/
            justify-content: left;
            margin:50px 55px;
        }
        .wrapper .form_body .tel{
            display: flex;
            margin-bottom: 20px;
            align-items: center;
        }
        .wrapper .form_body .tel p:first-child{
            font-size: 18px;
            margin-right: 10px;
            color: #666666;
        }
        .wrapper .form_body .tel input{
            width: 250px;
            height: 30px;
            border: solid 1px #dddddd;
            border-radius: 5px;
            margin-right: 10px;
            padding-left: 5px;
            box-sizing: border-box;
        }
        .wrapper .form_body .tel p:last-child{
            font-size: 14px;
            color: #dddddd;
        }
        .wrapper .form_body .pwd{
            display: flex;
            margin-bottom: 20px;
            align-items: center;
        }
        .wrapper .form_body .pwd p:first-child{
            font-size: 18px;
            margin-right: 10px;
            color: #666666;
        }
        .wrapper .form_body .pwd input{
            width: 250px;
            height: 30px;
            border: solid 1px #dddddd;
            border-radius: 5px;
            margin-right: 10px;
            padding-left: 5px;
            box-sizing: border-box;
        }
        .wrapper .form_body .pwd p:last-child{
            font-size: 14px;
            color: #dddddd;
        }
        .wrapper .form_body .cdk{
            display: flex;
            margin-bottom: 20px;
            align-items: center;
        }
        .wrapper .form_body .cdk p:first-child{
            font-size: 18px;
            margin-left: 18px;
            margin-right: 10px;
            color: #666666;
        }
        .wrapper .form_body .cdk input{
            width: 125px;
            height: 30px;
            border: solid 1px #dddddd;
            border-radius: 5px;
            margin-right: 10px;
            padding-left: 5px;
            box-sizing: border-box;
        }
        .wrapper .form_body .cdk .cdk_msg{
            margin-top:4px;
            padding: 3px 20px;
            height: 24px;
            border: solid 1px #666666;
            border-radius: 5px;
            background-color: #0a63de;
            font-size: 14px;
            color: #ffffff;
            /*align-items: center;*/
            text-align: center;
            align-content: center;
            box-sizing: border-box;
            cursor: pointer;
        }
        .wrapper .form_body .check{
            display: flex;
            margin-bottom: 20px;
            align-items: center;
        }
        .wrapper .form_body .check input{
            margin-left: 60px;
            margin-top: 3px;
            height: 15px;
            width: 15px;
        }
        .wrapper .form_body .check  p{
            font-size: 14px;
            color: #888888;
        }
        .wrapper .form_body .check p span{
            color: #0097ff;
            cursor: pointer;
        }
        .wrapper .form_body .agree{
            display: flex;
            margin-bottom: 20px;
            align-items: center;
        }
        .wrapper .form_body .agree button{
            margin-left: 65px;
            background-color: #fe8100;
            border-radius: 5px;
            color: #ffffff;
            height: 35px;
            width: 130px;
            border:none;
            margin-right: 10px;
        }
        .wrapper .form_body .agree p{
            font-size: 14px;
            color: #888888;
            margin-right: 5px;
        }
        .wrapper .form_body .agree a{
            color: #0097ff;
            text-decoration: none;
        }
        .wrapper .form_body .divider{
            width: 80%;
            margin:20px;
        }
        .wrapper .footer {
            flex: 0 0 10%;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .wrapper .footer p:first-child{
            margin-bottom: 10px;
            color: #666666;
            cursor: pointer;
        }
        .wrapper .footer p:last-child{
            margin-bottom: 10px;
            color: #666666;
        }
        .wrapper .footer .info p span{
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<form id="register_form" action="" method="get"></form>
        <div class="wrapper">
            <header>
                <h4>账号注册</h4>
                <hr color="#bbbbbb">
            </header>
            <div class="form_body" >
                <div class="tel">
                    <p>手机号码</p>
                    <input type="text"  id="usertel" form="register_form" placeholder="请输入手机号码" onblur="checkTel()" autocomplete="off">
                    <p id="tel_msg">可用于激活码获取、密码找回、订单查询等</p>
                </div>
                <div class="pwd">
                    <p>登陆密码</p>
                    <input type="password" id="userpwd" form="register_form" placeholder="请输入登录密码" onblur="checkPwd()" autocomplete="off">
                    <p id="pwd_msg">密码由数字、字母组成共8-20位</p>
                </div>
                <div class="cdk">
                    <p>激活码</p>
                    <input type="text" id="cdk_key" placeholder="请输入激活码">
                    <div class="cdk_msg">获取激活码</div>
                </div>
                <div class="check">
                    <input type="checkbox" id="select_box">
                    <p>我已经阅读并同时遵守<span>《用户服务协议》</span></p>
                </div>
                <div class="agree">
                    <button class="agree_button" id="agree_button" form="register_form">同意协议并注册</button>
                    <p>使用 <a href="">邮箱注册</a></p>
                </div>
                <div class="divider">
                    <hr>
                </div>
            </div>
            <div class="footer">
                <hr width="10%">
                <div class="info">
                    <p>投资者关系 | 酒店加盟 | 业务合作 | 加入我们 | <span id="tousu">我要投诉</span> |
                     安全中心 | Abuut Us</p>
                    <p>Copyright @2016 京ICP备0502 1530号 营业执照信息 保险经纪资质 客服电话10101216</p>
                </div>
                <hr width="10%">
            </div>
        </div>
<script type="text/javascript">
    function checkTel() {
        var tel = document.getElementById("usertel").value;
        var reg = /^1[3-9][0-9]{9}$/;
        var msg = "手机号输入有误!";
        var flag = false;
        if (reg.test(tel)){
            msg="√";
            flag=true;
        }
        document.getElementById("tel_msg").innerHTML=msg;
        return flag;
    }
    function checkPwd() {
        var tel = document.getElementById("userpwd").value;
        var reg = /^[a-zA-Z0-9]{8,20}$/;
        var msg = "密码格式有误!";
        var flag = false;
        if (reg.test(tel)){
            msg="√";
            flag=true;
        }
        document.getElementById("pwd_msg").innerHTML=msg;
        return flag;
    }
    document.getElementById("register_form").onsubmit=()=>{
        return checkTel() && checkPwd() ;
    }
</script>
</body>
</html>